<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">个人中心</h1>
        <p class="text-gray-600 mt-2">管理您的个人信息和偏好设置</p>
      </div>
      
      <!-- 用户信息卡片 -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex items-center space-x-4 mb-6">
          <div class="w-20 h-20 bg-blue-500 text-white rounded-full flex items-center justify-center text-3xl font-bold">
            {{ userInitial }}
          </div>
          <div>
            <h2 class="text-2xl font-semibold text-gray-900">{{ userName }}</h2>
            <p class="text-gray-600">{{ userEmail }}</p>
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-6 border-t border-gray-200">
          <div class="text-center">
            <div class="text-3xl font-bold text-blue-600">{{ essayCount }}</div>
            <div class="text-sm text-gray-600">作文数量</div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-bold text-green-600">{{ completedCount }}</div>
            <div class="text-sm text-gray-600">已批改</div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-bold text-amber-600">{{ avgScore }}</div>
            <div class="text-sm text-gray-600">平均分</div>
          </div>
        </div>
      </div>
      
      <!-- 占位提示 -->
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
        <Settings class="w-16 h-16 text-blue-500 mx-auto mb-4" />
        <h3 class="text-lg font-semibold text-gray-900 mb-2">功能开发中</h3>
        <p class="text-gray-600 mb-4">
          个人资料编辑、偏好设置等功能正在开发中，敬请期待！
        </p>
        <router-link
          to="/history"
          class="inline-flex items-center space-x-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
        >
          <FileText class="w-5 h-5" />
          <span>查看我的作文</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { Settings, FileText } from 'lucide-vue-next';
import { useUserStore } from '../stores/user.js';
import { useEssayStore } from '../stores/essay.js';

/**
 * ProfilePage 组件
 * 个人中心页面（占位版本）
 */

// ==================== Composition API ====================
const userStore = useUserStore();
const essayStore = useEssayStore();

// ==================== Computed ====================

/**
 * 用户名
 */
const userName = computed(() => userStore.user?.username || '用户');

/**
 * 用户邮箱
 */
const userEmail = computed(() => userStore.user?.email || 'user@example.com');

/**
 * 用户名首字母
 */
const userInitial = computed(() => {
  return userName.value.charAt(0).toUpperCase();
});

/**
 * 作文数量
 */
const essayCount = computed(() => essayStore.essays.length);

/**
 * 已完成数量
 */
const completedCount = computed(() => essayStore.completedEssaysCount);

/**
 * 平均分
 */
const avgScore = computed(() => {
  const completed = essayStore.essays.filter(e => e.status === 'completed' && e.score);
  if (completed.length === 0) return '-';
  const sum = completed.reduce((acc, e) => acc + e.score, 0);
  return Math.round(sum / completed.length);
});
</script>

